<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车练习</title>
</head>
<body>
<h3>购物车</h3>
<input type="checkbox" value="5000">华为手机5000元<br>
<input type="checkbox" value="30000">小米电视3000元<br>
<input type="checkbox" value="50">苹果耳机50<br>
<input type="checkbox" value="200000">特斯拉model3 200000元<br>
<input type="checkbox" id="all">全选
<p>总价:0</p>

<script src="../js/jquery-1.4.2.js"></script>
<script>
    //给所有多选框添加点击事件
    $("input").click(function(){
        //找到全选 js写法: this.id = jq写法;$(this).attr("id")
        if(this.id=="all"){
            //得到全选状态
            let status = $(this).attr("checked");
            //得到除了全选其他几个多选框 让其状态和全选状态一致
            $(this).siblings("input").attr("checked",status);

        }
        //计算价格
        let total = 0;
        //统计打勾的数量
        //得到所有商品的多选框
        $("input:not(#all)").each(function(){
            //判断dq遍历的商品多选框是否打勾
            if($(this).attr("checked")){
                total+=this.value*1;
                count++;
            }
        })
        //让全选的状态和勾选的数量建立关系
        $("#all").attr("checked",count==4?true:false)
        $("p").text("总价:"+total);//把计算完的总价显示



    })


</script>


</body>
</html>